<template>
  <div class="mygame">
    <!-- 头部导航 -->
    <div class="headnav">
      <van-tabs
        v-model:active="active"
        :animated="true"
        line-width="30px"
        sticky
      >
        <van-tab title="游戏库" to="/home/mygame/games">
          <router-view></router-view>
        </van-tab>
        <van-tab title="云玩" to="/home/mygame/cloudplay"
          ><Cloudplay
        /></van-tab>
        <van-tab title="预约" to="/home/mygame/appointment"
          ><Appointment
        /></van-tab>
        <template #title></template>
      </van-tabs>
      <!-- 导航右侧内容 -->
      <div class="right_side_navigation">
        <!--   下载 -->
        <van-image
          width="24"
          height="23"
          :src="require('../../../public/img/我的游戏/mygame1.png')"
        />
        <!--   火箭 -->
        <van-image
          width="22"
          height="23"
          :src="require('../../../public/img/我的游戏/mygame.png')"
        />
        <!--   我的 -->
        <van-image
          width="30"
          height="30"
          :src="require('../../../public/img/我的游戏/组 4.png')"
          @click="showPopup"
        />
      </div>
      <!-- 左侧弹出框 -->
      <van-popup
        v-model:show="show"
        position="left"
        :style="{ height: '100%', width: '85%' }"
        ><LeftPropWindow
      /></van-popup>
    </div>
  </div>
</template>

<script>
import Cloudplay from "@/views/home/mygame/Cloudplay.vue";
import Appointment from "@/views/home/mygame/Appointment.vue";

import LeftPropWindow from "@/views/home/LeftPropWindow.vue";

import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);

    // 左侧弹出
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return { active, show, showPopup };
  },
  components: {
    Cloudplay,
    Appointment,
    LeftPropWindow,
  },
};
</script>

<style lang="less">
.mygame {
  // 头部导航
  position: relative;

  .right_side_navigation {
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 10px;
    right: 10px;
    .van-image {
      margin: 0 10px;
    }
  }
  .headnav {
    // .van-tabs__wrap {
    // position: fixed;
    // top: 0;
    // left: 0;
    // }
    .van-tabs {
      .van-tabs__nav {
        padding-right: 140px;
        .van-tabs__line {
          background: #14b8c7;
        }
      }
    }
    .van-tab--active {
      font-size: 18px;
    }
  }
}
</style>
